<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组内置</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        font-size: 20px;
        margin: 10px;
    }

    div {
        padding: 5px;
        margin-left: 0px;
        border: 1px solid #686868;
    }
</style>

<body>
    <script>

        //1. push(值1,值2...)
        document.write('[10,20].push("hello")----' + [10, 20].push('hello'));
        document.write('<div>数组.push()   向数组的末尾添加一个或更多的元素, 并返回新的长度.</div>')

        //2.pop() 无参
        document.write('[10,20,30].pop()----' + [10, 20, 30].pop())
        document.write('<div>数组.pop()   删除数组的最后一个元素,并返回删除的数组; </div>')

        //3.unshift(值1,值2...)
        document.write('[10,20].unshift(30,"apple")----' + [10, 20].unshift(30, 'apple'))
        document.write('<div>数组.unshift()   向数组的开头添加一个元素 或 多个元素,并返回新的 长度 </div>')

        //4.shift()  无参
        document.write('[10,20,30].shift()----' + [10, 20, 30].shift())
        document.write('<div>数组.shift()   在数组的开头删除一个元素,并返回新数组</div>')

        //5.splice(index,howmany,值1,值2...)
        var arr = [10, 20, 30];
        arr.splice(2, 0, 40, 50);
        document.write('[10,20,30].splice(2,0,40,50)----' + arr + '<br>')
        var arr = [10, 20, 30];
        arr.splice(2, 2, 40, 50);
        document.write('[10,20,30].splice(2,2,40,50)----' + arr + '<br>')
        var arr = [10, 20, 30, 40];
        arr.splice(1, 2);
        document.write('[10,20,30,40].splice(1,2)----' + arr)
        document.write('<div>数组.splice()   从数组中添加或删除元素</div>')

        //6. concat(数组1,数组2...)
        var arr = [10, 20]
        document.write('[10,20].concat([40,50])----' + [10, 20].concat([40, 50]) + '<br>')
        document.write('[10,20].concat()----' + [10, 20].concat())
        document.write('<div>数组.concat()   连接两个 或者 更多的数组, 并返回结果 返回新数组 , 单层可以进行 深拷贝</div>')


        //7.join(spe)
        document.write('[10,20,30].join()----' + [10, 20, 30].join() + '<br>')
        document.write('[10,20,30].join()----' + [10, 20, 30].join('') + '<br>')
        document.write('<div>数组.join()   把数组的所有元素 放入一个字符串 </div>')

        //8.slice(start,end)
        document.write('[10,20,30].slice()----' + [10, 20, 30].slice() + '<br>')
        document.write('[10,20,30].slice(-2)----' + [10, 20, 30].slice(-2) + '<br>')
        document.write('[10,20,30,40].slice(1,3)----' + [10, 20, 30, 40].slice(1, 3)
            + '<br>')
        document.write('<div>数组.slice()   选取数组中的一部分 并返回一个新数组, 与concat 相似 只能浅层 深拷贝</div>')

        //9.sort()
        function dome(a, b) {
            return a - b;
        }
        document.write('[5,15,55,59].sort()----' + [5, 15, 55, 59].sort() + '<br>')
        document.write('[5,15,55,59].sort(function dome(a,b){return a - b;})----' + [5, 15, 55, 59].sort(dome) + '<br>')
        document.write('<div>数组.sort()   对数组元素进行排序, ASCII码进行排序,可以通过 比值函数 进行排序  结果 为 负值,正值,0</div>')

        //10.reverse()
        document.write('[10,20,30].reverse()----' + [10, 20, 30].reverse() + '<br>')
        document.write('<div>数组.reverse()   反转数组元素的顺序</div>')

        //11.indexOf()
        document.write('[10,20,30,20].indexOf(20)----' + [10, 20, 30, 20].indexOf(20) + '<br>')
        document.write('[10,20,30].indexOf(40)--->' + [10, 20, 30].indexOf(40) + '<br>')
        document.write('[10,20,30,10].indexOf(10,1)----' + [10, 20, 30, 10].indexOf(10, 1) + '<br>')
        document.write('<div>数组.indexOf(tem,start)   搜索数组中的元素, 并返回 它所在的位置(索引号) 第一次出现的位置 没有检测到 返回-1    所有 元素都会进行 对比<br>item		必需。要检索的项目<br>start	可选。从哪里开始搜索</div>')

        //12.lastIndexOf()
        document.write('[10,20,30,20].lastIndexOf(20)----' + [10, 20, 30, 20].indexOf(20) + '<br>')
        document.write('[10,20,30].lastIndexOf(40)--->' + [10, 20, 30].indexOf(40) + '<br>')
        document.write('[10,20,30,10].lastIndexOf(10,1)----' + [10, 20, 30, 10].indexOf(10, 1) + '<br>')
        document.write('<div>数组.lastIndexOf(tem,start)   搜索数组中的元素, 并返回 它所在的位置(索引号) 第一次出现的位置 没有检测到 返回-1   从后往前查.   所有 元素都会进行 对比<br>item		必需。要检索的项目<br>start	可选。从哪里开始搜索</div>')

        //13.findIndex()
        var arr66 = [10, 20, 30, 40, 50];
        var index = arr66.findIndex(function (item) {
            return item > 18;
        });
        document.write('[10, 20, 30, 40, 50].findIndex(function(item){return item > 18;})----' + index + '<br>')
        document.write('<div>数组.findIndex(回调函数)   返回 符合传入测试(函数) 条件的 第一个元素.  找到符合条件的元素后 其他元素将不会再进行比较<br>函数接受 3 个参数  项目值 item  项目索引 index  数组本身 array</div>')

        //14.forEach()
        var arr77 = [10, 20, 30, 40, 50];
        // 类似 for
        var str = '';
        arr77.forEach(function (item) {
            str += item;
        });
        document.write('[10, 20, 30, 40, 50].forEach(function (item) {str += item;})----' + str + '<br>')
        document.write('<div>数组.forEach(回调函数)   数组每个元素都执行一次回调函数. 没有 return 返回值<br>函数接受 3 个参数  项目值 item  项目索引 index  数组本身 array</div>')

        //15.map()
        var arr77 = [10, 20, 30, 40, 50];
        var str = '';
        arr77.map(function (item) {
            str += item;
        });
        document.write('[10, 20, 30, 40, 50].map(function (item) {str += item;})----' + str + '<br>')
        document.write('<div>数组.map(回调函数)   通过指定函数处理数组的每个元素,并返回处理后的数组. 有return 返回值<br>函数接受 3 个参数  项目值 item  项目索引 index  数组本身 array<br>没有 return 返回值时 与 forEach 一样</div>')

        //16.filter()
        var arr88 = [10, 20, 30, 40, 50]
        var sum = arr88.filter(function (item) {
            return item > 20;
        });
        document.write('[10, 20, 30, 40, 50].filter(function (item) {return item>18;})----' + sum + '<br>')
        document.write('<div>数组.filter(回调函数)   检测数组元素,并返回符合条件 所有元素的 数组     筛选<br>函数接受 3 个参数  项目值 item  项目索引 index  数组本身 array</div>')

        //17.every()
        var arr88 = [10, 20, 30, 40, 50]
        var sum = arr88.every(function (item) {
            return item > 20;
        });
        document.write('[10, 20, 30, 40, 50].every(function (item) {return item>18;})----' + sum + '<br>')
        document.write('<div>数组.every(回调函数)   检测数值元素的每个元素 是否 符合条件 全部符合 返回 true 否则返回 false<br>函数接受 3 个参数  项目值 item  项目索引 index  数组本身 array</div>')

        //18.some()
        var arr88 = [10, 20, 30, 40, 50]
        var sum = arr88.some(function (item) {
            return item > 20;
        });
        document.write('[10, 20, 30, 40, 50].some(function (item) {return item>18;})----' + sum + '<br>')
        document.write('<div>数组.some(回调函数)   检测数组中的元素 只要有一个符合条件 返回 true ,否则返回 false<br>函数接受 3 个参数  项目值 item  项目索引 index  数组本身 array</div>')

        //19.find()
        var numbers = [4, 9, 16, 25, 29];
        var first = numbers.find(function (value, index, array) {
            return value > 18;
        });
        document.write('[4, 9, 16, 25, 29].find(function (item) {return item>18;})----' + first + '<br>')
        document.write('<div>数组.find(回调函数)   返回 符合条件数组 中的 第一个元素值<br>函数接受 3 个参数  项目值 item  项目索引 index  数组本身 array</div>')

        //20.from()
        var arr = Array.from([1, 2, 3], x => x * 10);
        document.write('Array.from([1, 2, 3], x => x * 10)----' + arr + '<br>')
        document.write('<div>Array.from(数组)   通过给定对象 创建一个数组<br>from() 方法用于通过拥有 length 属性的 对象 或 可迭代的对象 来返回一个数组<br>object	必需，要转换为数组的对象。<br>mapFunction	可选，数组中每个元素要调用的函数。<br>thisValue	可选，映射函数(mapFunction)中的 this 对象。</div>')

        //21.isArray()
        var arr = [10, 20, 30]
        var arr0 = Array.isArray(arr);
        document.write('Array.isArray([10,20,30])----' + arr0 + '<br>')
        document.write('<div>数组.isArray()   判断对象是否为数组<br>如果对象是数组返回 true，否则返回 false。</div>')

        //22.includes()
        document.write('[1, 2, 3].includes(2)----' + [1, 2, 3].includes(2) + '<br>')
        document.write('[1, 2, 3].includes(3, 3)----' + [1, 2, 3].includes(3, 3) + '<br>')
        document.write('[1, 2, NaN].includes(NaN)----' + [1, 2, NaN].includes(NaN) + '<br>')
        document.write('<div>数组.isArray( searchElement, fromIndex )   判断一个数组 是否包含 一个指定的值,如果是返回 true，否则false。<br>searchElement	必须。需要查找的元素值。<br>fromIndex	可选。从该索引处开始查找 searchElement。<br>如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。</div>')
    </script>
</body>

</html>